<template>
  <div id="goods_list">

    <HeaderStatus></HeaderStatus>
    <div class="mui-content" id="goods_list_reset">
      <div class="goods_list">
        <div class="item" v-for="(i,k) in goods_list" :key='k' @tap="open_detail(i.goodsid)">
          <img :src="i.pic" alt="">
          <div class="title" >{{i.name}}</div>
          <div class="price">
            <span>￥{{i.min_price.toFixed(2)}}元</span>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import HeaderStatus from "../../components/Header";
  import goods_ajax from "../../ajax/goods_ajax"
  import util from "../../tools/util";
  export default {
    name: "goods_list",
    components: {
      HeaderStatus
    },
    data() {
      return {
        goods_list: [],
        header_text: ""
      };
    },
    methods:{
      open_detail(goodsid){
        this.$router.push("/shop/goods_list/goods?goodsid="+goodsid)
      },
      goods_data_init(){
        goods_ajax.get_normal_goods_list({
          bid:this.$store.state.account.community.sqid,
          type:2,
          page:1
        },res=>{
          if(res.length>0){
            this.goods_list=res;
          }
        })
      }
    },
    created() {
      let type = util.query_url("type");

      if (type == "youxiangtemai") {
        this.header_text = "优享特卖";
      }
      this.goods_data_init();

      // 接收到参数后再初始化头部
      this.$store.commit("change_header", {
        header_text: this.header_text,
        header_right_func: false,
        header_right_html: "<span></span>",
        header_back_btn: true
      });
    },
    mounted() {
//     mui.init({
//       pullRefresh: {
//         container: "#goods_list_reset", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
//         down: {
//           style: "circle", //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
//           color: "#2BD009", //可选，默认“#2BD009” 下拉刷新控件颜色
//           height: "50px", //可选,默认50px.下拉刷新控件的高度,
//           range: "100px", //可选 默认100px,控件可下拉拖拽的范围
//           offset: "0px", //可选 默认0px,下拉刷新控件的起始位置
//           auto: true, //可选,默认false.首次加载自动上拉刷新一次
//           callback: pullfresh_function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
//         }
//       }
//     });
    }
  };

  function pullfresh_function() {
    setTimeout(() => {
      mui.toast("已刷新");
      mui("#goods_list_reset")
        .pullRefresh()
        .endPulldown();
    }, 500);
  }
</script>
<style lang="less" scoped>
  body,
  html,
  .mui-content {
    font-family: "微软雅黑";
    background-color: #ffffff;
    padding-bottom: 2.1333rem;
    padding-top: 44px;
  }
  .mui-content {
    margin-top: 44px;
    padding-top: 0;
  }
  .mui-pull-top-pocket {
    top: 30px;
  }
  .mui-bar {
    border-bottom: 1px solid #c5c5c5;
  }
  .mui-bar .mui-segmented-control {
    top: 0;
  }
  .mui-segmented-control.mui-scroll-wrapper {
    height: 44px;
  }
  .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
    height: 44px;
  }
  .mui-scroll-wrapper {
    top: 30px;
  }
  .mui-action-back {
    height: 44px;
    width: 44px;
  }
  .mui-action-back img {
    width: 100%;
  }
  .mui-title {
    height: 44px;
  }
  .nav {
    width: 1000px;
  }
  .fr {
    float: right;
  }
  .fl {
    float: left;
  }
  .mui-bar {
    top: 0.8533rem;
    font-size: 0.7253rem;
  }
  .hr_20 {
    height: 0.4267rem;
    background-color: #f6f6f6;
  }
  .ptsp_top_stats {
    height: 0.9387rem;
    width: 100%;
    z-index: 20;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
  }
  .mui-title span {
    margin-left: 0.8533rem;
    display: inline-block;
    height: 44px;
    color: #888888;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox */
    -webkit-box-sizing: border-box;
    /* Safari */
  }
  .mui-title span.ptsp_active {
    color: #1c83fc;
    border-bottom: 3px solid #1c83fc;
  }
  .goods_list {
    padding: 0.384rem;
    overflow: hidden;
  }
  .goods_list .item {
    width: 7.424rem;
    height: 11.6053rem;
    box-sizing: border-box;
    box-shadow: 0 0 5px #aaa;
    float: left;
  }
  .goods_list .item img {
    width: 100%;
    height: 7.4667rem;
  }
  .goods_list .item .title {
    padding: 0.4267rem;
    padding-bottom: 0;
    line-height: 0.6827rem;
    font-size: 0.512rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .goods_list .item .price {
    padding: 0.4267rem;
  }
  .goods_list .item .price span {
    font-size: 0.6827rem;
    color: #1c83fc;
  }
  .goods_list .item .price i {
    width: 1.3653rem;
    height: 1.3653rem;
    float: right;
  }
  .goods_list .item .price i img {
    vertical-align: middle;
    width: 100%;
    height: 100%;
  }
  .goods_list .item:nth-child(odd) {
    margin-right: 0.384rem;
    margin-bottom: 0.384rem;
  }
</style>

